<template>
<Container>
    <Sprite :texture="enemyPlane"></Sprite>
</Container>
</template>

<script>
import enemyPlane from "../assets/enemyPlane.png"
import {onMounted, onUnmounted, reactive} from "vue";
import {game} from "../game";
import config from "../config";
export default {
    name: "Enemy",
    setup() {
        return {
            enemyPlane,
        }
    }
};

export function useEnemy() {
    const enemys = reactive([
        // {
        //     x: 50,
        //     y: 50,
        //     speed: 7
        // }, {
        //     x: 150,
        //     y: 150,
        //     speed: 5
        // }
    ]);

    function createEnemy(){
        setInterval(() => {
            const speed =
                typeof config.enemy.speed === "function"
                    ? config.enemy.speed()
                    : config.enemy.speed;

            enemys.push({
                x: Math.floor(Math.random() * 500) + 50,
                y: -100,
                speed,
            })
        }, 2000);
    }

    function move() {
        function handleTicker() {
            enemys.forEach((enemy,index) => {
                enemy.y += enemy.speed

                // 移除
                if (enemy.y > 1100){
                    enemys.splice(index,1)
                }
            })
        }

        onMounted(() => {
            game.ticker.add(handleTicker);
        });
        onUnmounted(() => {
            game.ticker.remove(handleTicker);
        })
    }

    createEnemy()
    move()

    return{
        enemys
    }
}
</script>

<style scoped>

</style>
